<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML>
<html>
<head>
<base href="<%=basePath %>">
<title>订单管理</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<%-- 引用layui.css --%>
<link rel="stylesheet" type="text/css" href="<%=basePath %>js/layui/css/layui.css" />
<link rel="stylesheet" type="text/css"href="<%=basePath %>css/common.css" />
<script type="text/javascript" src="js/common/jquery-1.11.3.js"></script>

</head>
<body>
	<div class="ibox">
		<div class="ibox-content bodycss">
			<!-- 表单搜索 开始 -->
		 	<section class="panel panel-padding ">
			<form class="layui-form  form-search"
				onsubmit="return false" method="get">
				<label class="layui-form-label">请选择时间</label>
				<div class="layui-form-item layui-inline">
					<div class="layui-input-inline">
						<input type="text" name="startTime" id="startTime" lay-verify="startTime" placeholder=""
						 autocomplete="off" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item layui-inline">
					<div class="layui-input-inline">
						<input type="text" name="endTime" id="endTime" lay-verify="endTime" placeholder=""
						autocomplete="off" class="layui-input">
					</div>
				</div>				
				<div class="layui-form-item layui-inline">
					<button class="layui-btn layui-btn-primary" lay-submit lay-filter="seach">
						<i class="layui-icon"></i> 搜 索
					</button>
					<span id="newCnt"></span>
				</div>
			</form>
			</section>
			<!-- 表单搜索 结束 -->
			<section class="panel panel-padding ">
			<table class="layui-table"
				lay-data="{
	                        id: 'menuTeble',
	                        width:'453',
	                        url:'memberStat/dayList.do',
	                        method:'post',
	                        page:true,
	                        even:true,
	                        skin:'row',
	                        done:doneFun,
	                        totalRow:true,
	                        limits:[10,20,30,40,50],
	                        limit:10}"
				lay-filter="popedomLay">
				<thead>
					<tr>
						<th lay-data="{checkbox:true,fixed:'left'}" ></th>
						<!-- <th lay-data="{field:'orderId', width:120,align:'center'}">订单id</th> -->
						<th lay-data="{field:'dateTime', width:200,align:'center' , totalRowText: '合计'}" >日期</th>
						<th lay-data="{field:'countNumber', width:200,align:'center', totalRow:true}" >下单数量</th>
					    <!-- <th lay-data="{field:'合计', width:200,align:'center'}" colspan="2">合计</th> -->
					</tr>
				</thead>
			</table>
			<div id="chart" style="width:653px;height:400px;position: relative;top: -400px;left: 660px;"></div>
			</section>
		</div>
	</div>
	
	<script type="text/javascript" src="js/common/echarts.min.js"></script>
	<script type="text/javascript" src="<%=basePath %>js/layui/layui.js"></script>
	<script type="text/javascript">
	layui.config({
	    base: "<%=basePath%>js/common/"
	}).use(["common", "element", "layer", "form", "table", "jquery","laydate"], function(){
			var elem = layui.element;
			var layer = layui.layer;
			var form = layui.form;
			var table = layui.table;
			var $ = layui.jquery;
			var laydate = layui.laydate;
			layui.common.init();
			  
			  //日期
			  laydate.render({
			    elem: '#startTime'
			  });
			  laydate.render({
			    elem: '#endTime'
			  });
			/**
			 * 监听刷新表格
			 */
		form.on('submit(seach)', function(data){
			table.reload('menuTeble', {
				where: data.field,
				page : {
					curr : 1
				}
			});
			return false;
			});
		});
function doneFun(res, curr, count){
       	//当前数据条数
        var limitNum = $(".layui-laypage-limits").find("option:selected").val();
       	//当前页码
       	var pageNum = $(".layui-laypage-em").next().html();
       	
       	var start = document.getElementById("startTime").value;
       	var end = document.getElementById("endTime").value;
       	 myCharts(pageNum,limitNum,start,end);
     }
function myCharts(pageNum,limitNum,start,end){
		 // 初始化图表标签
    var myChart = echarts.init(document.getElementById('chart'));
    	var xData = [];
		var yData1 = [];
		var yData2 = [];
		$.ajax({
			type: "post",
			dataType: "json",
			url: 'memberStat/dayList.do',
			data: {"page":pageNum,"limit":limitNum,"startTime":start,"endTime":end},
			success: function (data) {
				for(i=0;i<limitNum;i++){
					xData.push(data.data[i].dateTime)
					yData1.push(data.data[i].countNumber)
				}
				charts(xData,yData1)
			}
		});
function charts(xData,yData){
 var option = {
    title: {
        text: '日销量分析',
    },
    tooltip: {
        trigger: 'axis'
    },
    legend: {
        data: ['下单数量']
    },
    toolbox: {
        show: true,
    },
    calculable: true,
    xAxis: [
        {
            type: 'category',
            data: xData,
            axisLabel: {  
                interval:0,  
                rotate:40  
            },  
        }
    ],
    yAxis: [
        {
            type: 'value'
        }
    ],
    series: [
        {
            name: '下单数量',
            type: 'bar',
            data: yData1,
        }
    ]
};
    myChart.setOption(option);
	}
}
</script>

</body>
</html>
